<!DOCTYPE html>
<html lang="en">

<head>
    <!-- ========== Meta Tags ========== -->
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="Gostart - Startup Landing Page Template" name="description">

    <!-- ========== Page Title ========== -->
    <title>TOKEN（头肯）</title>

    <!-- ========== Favicon Icon ========== -->
    <link href="assets/img/favicon.png" rel="shortcut icon" type="image/x-icon">

    <!-- ========== Start Stylesheet ========== -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="assets/css/themify-icons.css" rel="stylesheet"/>
    <link href="assets/css/flaticon-set.css" rel="stylesheet"/>
    <link href="assets/css/magnific-popup.css" rel="stylesheet"/>
    <link href="assets/css/owl.carousel.min.css" rel="stylesheet"/>
    <link href="assets/css/owl.theme.default.min.css" rel="stylesheet"/>
    <link href="assets/css/animate.css" rel="stylesheet"/>
    <link href="assets/css/bootsnav.css" rel="stylesheet"/>
    <link href="style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet"/>
    <!-- ========== End Stylesheet ========== -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="assets/js/html5/html5shiv.min.js"></script>
    <script src="assets/js/html5/respond.min.js"></script>
    <![endif]-->

    <!-- ========== Google Fonts ========== -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800" rel="stylesheet">

</head>

<body>

<!-- Preloader Start -->
<div class="se-pre-con"></div>
<!-- Preloader Ends -->

<!-- Header
============================================= -->
<header id="home">

    <!-- Start Navigation -->
    <nav class="navbar navbar-default active-bg inc-border navbar-fixed dark no-background bootsnav">

        <div class="container-full">

            <!-- Start Atribute Navigation -->
            <div class="attr-nav button fixed-nav">

            </div>
            <!-- End Atribute Navigation -->

            <!-- Start Header Navigation -->
            <div class="navbar-header">
                <button class="navbar-toggle" data-target="#navbar-menu" data-toggle="collapse" type="button">
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="index.html">
                    <img alt="Logo" class="logo" src="assets/img/logo.png">
                </a>
            </div>
            <!-- End Header Navigation -->

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navbar-menu">
                <ul class="nav navbar-nav navbar-right" data-in="#" data-out="#">
                    <li class="dropdown active dropdown-right">
                        <a class="dropdown-toggle smooth-menu" href="#home">主页</a>

                    </li>

                    <li>
                        <a class="smooth-menu" href="#about">我们是谁</a>
                    </li>
                    <li>
                        <a class="smooth-menu" href="#services">我们的服务</a>
                    </li>
                    <li>
                        <a class="smooth-menu" href="#overview">服务流程</a>
                    </li>
                    <li>
                        <a class="smooth-menu" href="#gailan">项目概览</a>
                    </li>
                    <li>
                        <a class="smooth-menu" href="#team">团队介绍</a>
                    </li>
                    <li>
                        <a class="smooth-menu" href="#contactus">联系我们</a>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>
    </nav>
    <!-- End Navigation -->

</header>
<!-- End Header -->

<!-- Start Banner
============================================= -->
<div class="banner-area bg-cover" style="background-image: url(assets/img/shape-1.png);">
    <div class="carousel light-bg top-padding text-dark slide animate_text" data-ride="carousel" id="bootcarousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="container">
                    <div class="row">
                        <div class="double-items">
                            <div class="col-md-7">
                                <div class="info">
                                    <h2 data-animation="animated slideInLeft">我们将构造令您满意的
                                        <strong>网页/小程序/APP...</strong></h2>
                                    <ul data-animation="animated fadeInLeft">
                                        <li>高度定制</li>
                                        <li>功能丰富</li>
                                        <li>页面美观</li>
                                        <li>安全可靠</li>
                                    </ul>
                                    <a class="btn circle btn-theme effect btn-md"
                                       data-animation="animated fadeInDown"
                                       href="mailto:mruixin@outlook.com?subject=咨询&body=您好，我想了解更多信息。"
                                       target="_blank">
                                        联系我们，了解更多
                                    </a>

                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="thumb" data-animation="animated slideInRight">
                                    <img alt="Thumb" src="assets/img/illustrations/2.svg">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="container">
                    <div class="row">
                        <div class="double-items">
                            <div class="col-md-7">
                                <div class="info">
                                    <h2 data-animation="animated slideInLeft">我们年轻 <br><strong>但服务标准</strong>决不妥协
                                    </h2>
                                    <ul data-animation="animated fadeInLeft">
                                        <li>足够专业</li>
                                        <li>快速响应</li>
                                        <li>新鲜视角</li>
                                        <li>成本更高</li>
                                    </ul>
                                    <a class="btn circle btn-theme effect btn-md"
                                       data-animation="animated fadeInDown"
                                       href="mailto:mruixin@outlook.com?subject=咨询&body=您好，我想了解更多信息。"
                                       target="_blank">
                                        联系我们，了解更多
                                    </a>

                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="thumb" data-animation="animated slideInRight">
                                    <img alt="Thumb" src="assets/img/illustrations/1.svg">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Wrapper for slides -->

        <!-- Left and right controls -->
        <a class="left carousel-control theme" data-slide="prev" href="#bootcarousel">
            <i class="fa fa-angle-left"></i>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control theme" data-slide="next" href="#bootcarousel">
            <i class="fa fa-angle-right"></i>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
<!-- End Banner -->

<!-- Start Our About
============================================= -->
<!--    <div id="features" class="features-area bg-gray shape default-padding">-->
<!--        <div class="container">-->
<!--            <div class="row">-->
<!--                &lt;!&ndash; Start Features Content &ndash;&gt;-->
<!--                <div class="features-content">-->
<!--                    <div class="col-md-5 thumb">-->
<!--                        <img src="assets/img/illustrations/9.svg" alt="Thumb">-->
<!--                    </div>-->
<!--                    <div class="col-md-7 info">-->
<!--                        <div class="info-items">-->
<!--                            <div class="features">-->
<!--                                <div class="row">-->
<!--                                    &lt;!&ndash; Left Grid &ndash;&gt;-->
<!--                                    <div class="col-md-6 col-sm-6 equal-height">-->
<!--                                        <div class="item">-->
<!--                                            <i class="flaticon-dashboard"></i>-->
<!--                                            <p>-->
<!--                                                situation perpetual allowance offending as principle satisfied. Improved carriage securing.-->
<!--                                            </p>-->
<!--                                            <h4>Monitoring</h4>-->
<!--                                        </div>-->
<!--                                        <div class="item">-->
<!--                                            <i class="flaticon-question"></i>-->
<!--                                            <p>-->
<!--                                                Fortune account written prepare invited no passage. Garrets use ten you the weather ferrars.-->
<!--                                            </p>-->
<!--                                            <h4>Support Chat</h4>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; End Left Grid &ndash;&gt;-->

<!--                                    &lt;!&ndash; Right Grid &ndash;&gt;-->
<!--                                    <div class="col-md-6 col-sm-6 equal-height">-->
<!--                                        <div class="item">-->
<!--                                            <i class="flaticon-analysis"></i>-->
<!--                                            <p>-->
<!--                                                Offending delivered questions met. Acceptance she interested new boisterous discretion celebrated. -->
<!--                                            </p>-->
<!--                                            <h4>System Analysis</h4>-->
<!--                                        </div>-->
<!--                                        <div class="item">-->
<!--                                            <i class="flaticon-rocket"></i>-->
<!--                                            <p>-->
<!--                                                Jennings dashwood to quitting marriage bachelor in. On as conviction in of appearance. -->
<!--                                            </p>-->
<!--                                            <h4>First Run</h4>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; End Right Grid &ndash;&gt;-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash; End Features Content &ndash;&gt;-->

<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!-- End Our Features -->

<!-- Start Our About
============================================= -->
<div class="about-area half-bg default-padding" id="about">
    <div class="container">
        <div class="row">
            <!-- Start About Content -->
            <div class="about-content">
                <div class="col-md-12 info">
                    <div class="content-info">
                        <div class="row">
                            <div class="col-md-6 left-info text-light">
                                <h4>我们是谁</h4>
                                <h2>我们是TOKEN（头肯），是由中南财经政法大学在校学生在2021年创立</h2>
                                <p>
                                    我们具有专业的软件团队，专注于移动网页，小程序开发，教育大数据分析，跨界创意和新媒体运营等领域
                                </p>
                                <a class="popup-youtube light video-play-button relative"
                                   href="https://www.youtube.com/">
                                    <i class="fa fa-play"></i>
                                </a>
                            </div>
                            <div class="col-md-6 right-info"
                                 style="font-size: 18px; line-height: 1.8; color: #333; font-family: 'Arial', sans-serif;">
                                <p>
                                    <span style="font-size: 24px; font-weight: bold; color: #FF4452; display: block; margin-bottom: 8px;">2023.10</span>
                                    开发的小程序“<span
                                        style="font-weight: bold; color: #000;">路路通汽车维修预约系统</span>”，成功服务于某地级市超过五家分店，整合了在线预约、维修状态跟踪和客户评价功能。小程序每天为超过
                                    <span style="font-weight: bold; color: #FF4452;">100位工人</span>和
                                    <span style="font-weight: bold; color: #FF4452;">1000位顾客</span>提供便捷的维修服务，极大提升了分店的运营效率和客户体验。
                                </p>
                                <p>
                                    <span style="font-size: 24px; font-weight: bold; color: #FF4452; display: block; margin-bottom: 8px;">2023.5</span>
                                    主导设计的小程序“<span
                                        style="font-weight: bold; color: #000;">奶茶店在线点单系统</span>”，为某本地热门奶茶店量身定制，功能包括饮品自定义搭配、优惠券发放、在线支付和会员积分管理。上线后极大方便了客户的点单，同时有效提升了老顾客的留存率。
                                    <span style="font-weight: bold; color: #FF4452;">点单到取餐时间减少近 30%</span>，月均订单量稳定在
                                    <span style="font-weight: bold; color: #FF4452;">3,000笔以上</span>。
                                </p>
                                <p>
                                    <span style="font-size: 24px; font-weight: bold; color: #FF4452; display: block; margin-bottom: 8px;">2023.2</span>
                                    开发的“小程序——<span style="font-weight: bold; color: #000;">宠物医院预约系统</span>”，为一家私营宠物诊所定制，支持用户在线选择诊疗项目、预约医生、查询疫苗记录，并能通过小程序接收诊所的定期健康提醒。系统推出后，每天服务超过
                                    <span style="font-weight: bold; color: #FF4452;">50名宠物主人</span>，预约效率提高了
                                    <span style="font-weight: bold; color: #FF4452;">60%</span>。同时诊所通过电子化的宠物档案管理，节省了纸质记录的存档和检索时间，提升了诊疗流程的标准化。
                                </p>
                                <p>
                                    <span style="font-size: 24px; font-weight: bold; color: #FF4452; display: block; margin-bottom: 8px;">2021.9</span>
                                    设计并实现了“OTypeMaster”官方网站，集成了多种功能模块，包括教育资源展示、用户互动和活动报名等。网站采用了响应式设计，适配多种设备，确保用户在PC端和移动端都有良好的使用体验。上线后一个月内，访问量突破
                                    <span style="font-weight: bold; color: #FF4452;">数万次</span>，累计注册用户超过
                                    <span style="font-weight: bold; color: #FF4452;">3000人</span>，为团队的教育资源推广和品牌建设奠定了技术基础。
                                </p>
                                <p>
                                    <span style="font-size: 24px; font-weight: bold; color: #FF4452; display: block; margin-bottom: 8px;">2022以前</span>
                                    团队主要成员参与开发的“<span
                                        style="font-weight: bold; color: #000;">武汉理工大学智慧微校园</span>”平台，为近
                                    <span style="font-weight: bold; color: #FF4452;">3万名师生</span>提供课程查询、图书预约等数字化服务，累计访问量超过
                                    <span style="font-weight: bold; color: #FF4452;">300万</span>，日活跃用户达
                                    <span style="font-weight: bold; color: #FF4452;">1万</span>；同时参与了“<span
                                        style="font-weight: bold; color: #000;">武汉大学‘我心目中的好导师’线上投票系统</span>”，活动期间累计投票数突破
                                    <span style="font-weight: bold; color: #FF4452;">5万</span>，为评选活动提供了高效稳定的技术支持。
                                </p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- End About -->

        </div>
    </div>
</div>
<!-- End Our About -->

<!-- Start Services Area
============================================= -->
<div class="services-area half-bg default-padding-top bottom-less" id="services">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="site-heading text-center">
                    <h4>我们提供什么？</h4>
                    <h2>我们的<strong>服务</strong></h2>
                    <p>

                        我们致力于以创新的技术和专业的设计，帮助客户打造高效、实用的数字化解决方案。无论是功能强大的小程序还是现代化的企业官网，我们的团队始终以用户为中心，从创意构想到技术实现，为您的业务增添数字化竞争力。选择我们，让您的品牌在互联网时代更具优势！ </p>
                </div>
            </div>
        </div>
        <div class="services-items text-center">
            <div class="row">
                <!-- Single Item -->
                <div class="col-md-4 equal-height">
                    <div class="item">
                        <h4>小程序开发</h4>
                        <div class="icon">
                            <i class="flaticon-architect"></i>
                        </div>
                        <p style="font-size: 18px; line-height: 1.8; color: #555; text-align: left;">
                            <span style="font-size: 20px; font-weight: bold; color: #FF4452;">定制化解决方案：</span><br>
                            <span style="font-size: 16px; color: #777;">根据客户需求量身定制功能完善、界面友好的小程序，涵盖在线商城、预约系统、活动管理等多种场景。</span>
                        </p>
                        <p style="font-size: 18px; line-height: 1.8; color: #555; text-align: left; margin-top: 10px;">
                            <span style="font-size: 20px; font-weight: bold; color: #FF4452;">全生命周期服务：</span><br>
                            <span style="font-size: 16px; color: #777;">从需求分析到设计、开发、测试、上线，全流程服务确保项目顺利落地。</span>
                        </p>
                        <p style="font-size: 18px; line-height: 1.8; color: #555; text-align: left; margin-top: 10px;">
                            <span style="font-size: 20px; font-weight: bold; color: #FF4452;">行业覆盖：</span><br>
                            <span style="font-size: 16px; color: #777;">我们在餐饮、教育、医疗、汽车服务等多个行业拥有成功案例，助力客户实现数字化转型。</span>
                        </p>


                         <a class="btn circle btn-theme effect btn-md"
                                       data-animation="animated fadeInDown"
                                       href="mailto:mruixin@outlook.com?subject=咨询&body=您好，我想了解更多信息。"
                                       target="_blank">
                                        联系我们，了解更多
                                    </a>
                    </div>
                </div>
                <!-- End Single Item -->
                <!-- Single Item -->
                <div class="col-md-4 equal-height">
                    <div class="item">
                        <h4>网页设计与开发</h4>
                        <div class="icon">
                            <i class="flaticon-software"></i>
                        </div>
                        <p style="font-size: 18px; line-height: 1.8; color: #555; text-align: left;">
                            <span style="font-size: 20px; font-weight: bold; color: #FF4452;">高端网页设计：</span><br>
                            <span style="font-size: 16px; color: #777;">打造简洁、现代的响应式网页，确保在PC端和移动端都能提供一致的用户体验。</span>
                        </p>
                        <p style="font-size: 18px; line-height: 1.8; color: #555; text-align: left; margin-top: 10px;">
                            <span style="font-size: 20px; font-weight: bold; color: #FF4452;">企业官网与系统开发：</span><br>
                            <span style="font-size: 16px; color: #777;">提供企业官网、信息管理系统、在线投票平台等开发服务，注重性能与安全性。</span>
                        </p>
                        <p style="font-size: 18px; line-height: 1.8; color: #555; text-align: left; margin-top: 10px;">
                            <span style="font-size: 20px; font-weight: bold; color: #FF4452;">以用户为中心：</span><br>
                            <span style="font-size: 16px; color: #777;">通过用户调研和数据分析，优化界面布局与交互逻辑，提高用户满意度。</span>
                        </p>


                         <a class="btn circle btn-theme effect btn-md"
                                       data-animation="animated fadeInDown"
                                       href="mailto:mruixin@outlook.com?subject=咨询&body=您好，我想了解更多信息。"
                                       target="_blank">
                                        联系我们，了解更多
                                    </a>
                    </div>
                </div>
                <!-- End Single Item -->
                <!-- Single Item -->
                <div class="col-md-4 equal-height">
                    <div class="item">
                        <h4>技术支持与运维</h4>
                        <div class="icon">
                            <i class="flaticon-testing"></i>
                        </div>
                        <p style="font-size: 18px; line-height: 1.8; color: #555; text-align: left;">
                            <span style="font-size: 20px; font-weight: bold; color: #FF4452;">持续维护：</span><br>
                            <span style="font-size: 16px; color: #777;">提供长期技术支持，确保小程序与网页的稳定运行。</span>
                        </p>
                        <p style="font-size: 18px; line-height: 1.8; color: #555; text-align: left; margin-top: 10px;">
                            <span style="font-size: 20px; font-weight: bold; color: #FF4452;">功能迭代：</span><br>
                            <span style="font-size: 16px; color: #777;">根据客户需求快速响应，开发新增功能并优化现有模块。</span>
                        </p>
                        <p style="font-size: 18px; line-height: 1.8; color: #555; text-align: left; margin-top: 10px;">
                            <span style="font-size: 20px; font-weight: bold; color: #FF4452;">监控与数据分析：</span><br>
                            <span style="font-size: 16px; color: #777;">通过后台监控系统，为客户提供详细的数据分析与业务优化建议。</span>
                        </p>

                         <a class="btn circle btn-theme effect btn-md"
                                       data-animation="animated fadeInDown"
                                       href="mailto:mruixin@outlook.com?subject=咨询&body=您好，我想了解更多信息。"
                                       target="_blank">
                                        联系我们，了解更多
                                    </a>
                    </div>
                </div>
                <!-- End Single Item -->
            </div>
        </div>
    </div>
</div>
<!-- End Services Area -->

<!-- Start Work Process Area
============================================= -->
<div class="process-area default-padding" id="overview">
    <div class="container">
        <div class="row">
            <div class="col-md-6 thumb">
                <img alt="Thumb" src="assets/img/illustrations/5.svg">
            </div>
            <div class="col-md-6 info">
                <h4>服务流程</h4>
                <h2>精心设计，助力企业数字化转型</h2>
                <!-- Tab Nav -->
                <div class="tab-navigation text-center">
                    <ul class="nav nav-pills">
                        <li class="active">
                            <a aria-expanded="true" data-toggle="tab" href="#tab1">
                                需求分析
                            </a>
                        </li>
                        <li>
                            <a aria-expanded="false" data-toggle="tab" href="#tab2">
                                开发实施
                            </a>
                        </li>
                        <li>
                            <a aria-expanded="false" data-toggle="tab" href="#tab3">
                                交付优化
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- End Tab Nav -->
                <!-- Start Tab Content -->
                <div class="tab-content">

                    <!-- Start Single Item -->
                    <div class="tab-pane fade active in" id="tab1">
                        <div class="info">
                            <p>
                                我们从理解客户需求出发，与客户紧密沟通，明确项目目标，制定详细的功能需求和开发计划。我们通过市场调研和行业分析，确保每个项目的解决方案具有针对性和可行性。
                            </p>
                            <ul>
                                <li>
                                    <h5>深度需求挖掘</h5>
                                    全面了解业务场景，准确定义功能模块和关键目标。
                                </li>
                                <li>
                                    <h5>技术可行性分析</h5>
                                    根据项目需求，制定最优的技术架构和实现方案。
                                </li>
                                <li>
                                    <h5>精准项目规划</h5>
                                    明确项目里程碑和交付时间，确保开发进度有序推进。
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- End Single Item -->

                    <!-- Start Single Item -->
                    <div class="tab-pane fade" id="tab2">
                        <div class="info">
                            <p>
                                在开发阶段，我们将需求转化为高质量的代码，实现功能开发、UI设计和系统集成。我们注重细节，确保每一个模块都符合用户体验的最佳实践。
                            </p>
                            <ul>
                                <li>
                                    <h5>敏捷开发流程</h5>
                                    分阶段迭代开发，快速交付核心功能。
                                </li>
                                <li>
                                    <h5>高质量代码实现</h5>
                                    使用主流开发框架，确保系统性能稳定、安全。
                                </li>
                                <li>
                                    <h5>UI与功能集成</h5>
                                    打造美观且实用的界面，功能实现无缝衔接。
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- End Single Item -->

                    <!-- Start Single Item -->
                    <div class="tab-pane fade" id="tab3">
                        <div class="info">
                            <p>
                                开发完成后，我们对系统进行全面的测试与优化，确保产品达到上线标准。同时，我们提供后续支持和维护服务，助力客户实现长期价值。
                            </p>
                            <ul>
                                <li>
                                    <h5>严格测试流程</h5>
                                    包括功能测试、性能测试、用户体验测试，确保产品质量无误。
                                </li>
                                <li>
                                    <h5>持续优化服务</h5>
                                    根据用户反馈迭代优化，不断提升产品表现。
                                </li>
                                <li>
                                    <h5>长期运维支持</h5>
                                    提供技术支持和系统维护，确保系统稳定运行。
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- End Single Item -->
                </div>
                <!-- End Tab Content -->
            </div>

        </div>
    </div>
</div>
<!-- End Work Process Area -->

<!-- Start Pricing Area
============================================= -->

<div class="portfolio-area" id="gailan">
    <div class="portfolio-grid">
        <!-- 单个项目 -->
        <div class="single-item">
            <div class="image-wrapper" onclick="showOverlay('assets/img/otype.jpg')">
                <img alt="Project 1" class="project-image" src="assets/img/otype.jpg"/>
            </div>
            <div class="project-name">O型学霸官网</div>
        </div>

        <!-- 其他项目按需添加 -->
        <div class="single-item">
            <div class="image-wrapper" onclick="showOverlay('assets/img/aoda.jpg')">
                <img alt="Project 2" class="project-image" src="assets/img/aoda2.png"/>
            </div>
            <div class="project-name">奥达汽修预约</div>
        </div>
        <!-- 更多项目... -->
        <div class="single-item">
            <div class="image-wrapper" onclick="showOverlay('assets/img/pet.jpg')">
                <img alt="Project 2" class="project-image" src="assets/img/pet2.jpg"/>
            </div>
            <div class="project-name">宠物派</div>
        </div>
    </div>
</div>

<!-- 遮罩层 -->
<div class="overlay" id="overlay" onclick="closeOverlay()">
    <div class="overlay-content">
        <img alt="Project Image" class="large-image" id="overlay-image"/>
        <span class="close-btn" onclick="closeOverlay()">X</span>
    </div>
</div>

<!-- End Pricing Area -->

<!-- Start Team Area
============================================= -->
<div class="team-area shape default-padding bottom-less" id="team">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="site-heading text-center">
                    <h4> 团队</h4>
                    <h2>项目 <strong>成员（部分）</strong></h2>
                    <p>

                        我们的团队由一群充满热情的大学生开发者组成，他们不仅拥有扎实的学术背景，还具备实际项目开发的经验。每一位成员都是各自领域的佼佼者，他们将最新的技术知识与创新思维相结合，致力于为客户提供最前沿的解决方案。我们年轻、有活力，对技术充满激情，这使得我们能够以独特的视角和无限的创造力来解决复杂的问题。我们相信，通过团队的协作和不懈努力，我们能够超越期望，为您的项目带来真正的价值。 </p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="team-items text-center">
                <!-- Single Item -->
                <div class="col-md-4 single-item">
                    <div class="item">
                        <div class="thumb">
                            <!--                                <img src="assets/img/team/1.jpg" alt="Thumb">-->
                            <div class="social">
                                <ul>
                                    <li class="facebook">
                                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                                    </li>
                                    <li class="twitter">
                                        <a href="#"><i class="fab fa-twitter"></i></a>
                                    </li>
                                    <li class="instagram">
                                        <a href="#"><i class="fab fa-instagram"></i></a>
                                    </li>
                                    <li class="linkedin">
                                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="info">

                            <h4>马瑞欣</h4>
                            <span>前端开发 & 产品经理</span>
                            <p>
                                熟练掌握HTML、CSS和JavaScript，构建响应式界面。 熟悉Vue.js，提升应用性能。
                                善于挖掘需求，精准满足客户需要。曾在德勤协助完成阿里数据银行和戴森百度预警构建，有较为丰富的经验。
                            </p>

                        </div>
                    </div>
                </div>
                <!-- End Single Item -->
                <!-- Single Item -->
                <div class="col-md-4 single-item">
                    <div class="item">
                        <div class="thumb">
                            <!--                                <img src="assets/img/team/2.jpg" alt="Thumb">-->
                            <div class="social">
                                <ul>
                                    <li class="facebook">
                                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                                    </li>
                                    <li class="twitter">
                                        <a href="#"><i class="fab fa-twitter"></i></a>
                                    </li>
                                    <li class="instagram">
                                        <a href="#"><i class="fab fa-instagram"></i></a>
                                    </li>
                                    <li class="linkedin">
                                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="info">

                            <h4>尹佳明</h4>
                            <span>后端工程师</span>
                            <p>
                                掌握编程语言：熟练使用Java、Python或Node.js等后端主流编程语言
                                。
                                精通数据库操作：熟悉MySQL、PostgreSQL、MongoDB等数据库系统，进行数据的CRUD操作
                                。
                                设计API接口：能够设计和实现RESTful或GraphQL API，确保数据交互的高效性
                                。
                                保障系统安全：掌握网络安全知识，如身份认证、授权，防御SQL注入和XSS攻击
                                。
                                优化性能：进行应用和数据库性能分析及调优，提升系统响应速度
                                。
                                开发微服务：了解并能够设计和开发微服务架构下的系统
                                。
                                使用消息队列：熟悉RabbitMQ, Kafka等消息队列的使用，处理异步任务
                                。
                            </p>

                        </div>
                    </div>
                </div>
                <!-- End Single Item -->
                <!-- Single Item -->
                <div class="col-md-4 single-item">
                    <div class="item">
                        <div class="thumb">
                            <!--                                <img src="assets/img/team/3.jpg" alt="Thumb">-->
                            <div class="social">
                                <ul>
                                    <li class="facebook">
                                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                                    </li>
                                    <li class="twitter">
                                        <a href="#"><i class="fab fa-twitter"></i></a>
                                    </li>
                                    <li class="instagram">
                                        <a href="#"><i class="fab fa-instagram"></i></a>
                                    </li>
                                    <li class="linkedin">
                                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="info">

                            <h4>潘越</h4>
                            <span>UI 设计</span>
                            <p>
                                掌握设计工具：熟练操作Sketch、Adobe XD、Figma等设计软件，高效完成设计任务。
                                实现创意构思：将抽象概念转化为具体的设计原型，展现创新思维。
                                优化用户流程：分析用户路径，简化操作步骤，提升用户满意度。

                            </p>

                        </div>
                    </div>
                </div>
                <!-- End Single Item -->
            </div>
        </div>
    </div>
</div>
<!-- End Team Area -->

<!-- Start Testimonials Area
============================================= -->
<div class="testimonials-area default-padding bg-dark text-light">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="site-heading text-center">
                    <h4>大家说过什么</h4>
                    <h2>客户 <strong>评价</strong></h2>
                </div>
            </div>
        </div>
        <div class="col-md-8 col-md-offset-2">
            <div class="row">
                <div class="testimonial-items testimonial-carousel owl-carousel owl-theme">
                    <!-- Single Item -->
                    <div class="item">
                        <div class="col-md-5 thumb">
                            <img alt="Thumb" src="assets/img/team/卡通人物女孩.png">
                        </div>
                        <div class="col-md-7 info">
                            <i class="ti-quote-left"></i>
                            <h4>冯女士</h4>
                            <span>9家连锁店法人</span>
                            <p>
                                “我们非常高兴能够与贵公司合作，开发了这款汽修预约小程序。自从上线以来，客户的体验得到了极大的提升，尤其是在预约流程和维修状态跟踪方面。客户不再需要长时间等待电话回复，一切都可以通过小程序轻松完成。每个客户都能实时查看维修进度和状态，大大提高了服务的透明度与效率。员工的工作负担也得到了减轻，整体运营效率显著提高。
                                小程序的界面简洁易用，功能设计也非常符合我们的需求，从客户预约到维修完成的整个流程都得到了很好的优化。此外，技术团队在开发过程中也充分考虑到了我们的特殊需求和行业特点，做出了定制化调整，解决了我们许多实际问题。

                            </p>
                        </div>
                    </div>
                    <!-- End Single Item -->
                    <!-- Single Item -->
                    <div class="item">
                        <div class="col-md-5 thumb">
                            <img alt="Thumb" src="assets/img/team/卡通人物商务.png">
                        </div>
                        <div class="col-md-7 info">
                            <i class="ti-quote-left"></i>
                            <h4>王先生</h4>
                            <span>宠物爱好者</span>
                            <p>
                                “我们非常满意与贵公司合作开发的宠物上门喂养小程序。随着宠物行业的发展，宠物主人对宠物护理的需求越来越多样化，尤其是在忙碌的工作日，很多主人无法亲自照顾宠物。贵公司为我们量身定制的这款小程序，让宠物主人可以随时预约上门喂养服务，操作简单便捷，极大提高了我们的服务效率。
                                小程序的功能设计非常贴合宠物行业的实际需求，用户不仅可以轻松选择服务内容，还能预约特定时间段的上门服务，甚至能够实时查看宠物喂养记录和健康情况。这使得宠物主人对我们的服务更加信任和满意。同时，我们的工作人员通过后台管理系统可以清晰地查看每个预约和服务情况，极大提升了运营效率。
                                技术团队的开发不仅专业，而且非常注重细节，针对我们实际运营的痛点进行了优化。特别是系统的稳定性和安全性保障，确保了每一次服务都能顺利进行。
                                这款小程序的推出，帮助我们增强了客户粘性和市场竞争力，我们非常感谢贵公司提供的专业技术支持，期待未来的更多合作！”
                            </p>
                        </div>
                    </div>
                    <!-- End Single Item -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Testimonials Area -->

<!-- Start Contact Area
============================================= -->

<!-- End Contact Area -->

<!-- Start Companies Area
============================================= -->
<div class="companies-area bg-gray text-center default-padding">
    <div class="container">
        <div class="companies-items">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="heading">
                        <h4>服务总人数</h4>
                        <h2><strong>2W+</strong> 日活跃</h2>
                        <p>
                        </p>
                    </div>

                    <div class="item-list companies-carousel owl-carousel owl-theme"
                         style="display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px;">
                        <div class="item" style="flex: 0 1 auto; text-align: center;">
                            <img alt="Thumb" src="assets/img/weixin.png"
                                 style="width: 80px; height: auto; max-width: 100%;">
                        </div>
                        <div class="item" style="flex: 0 1 auto; text-align: center;">
                            <img alt="Thumb" src="assets/img/zhifubaozhifu.png"
                                 style="width: 80px; height: auto; max-width: 100%;">
                        </div>
                        <div class="item" style="flex: 0 1 auto; text-align: center;">
                            <img alt="Thumb" src="assets/img/webpage.png"
                                 style="width: 80px; height: auto; max-width: 100%;">
                        </div>
                        <div class="item" style="flex: 0 1 auto; text-align: center;">
                            <img alt="Thumb" src="assets/img/Vue.png"
                                 style="width: 80px; height: auto; max-width: 100%;">
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Companies Area -->

<!-- Start Footer
============================================= -->
<footer>
    <div class="svg-shape" id="contactus">
        <svg class="gray" preserveAspectRatio="none" viewBox="0 0 1070 52" xmlns="http://www.w3.org/2000/svg">
            <path d="M0,0S247,91,505,32c261.17-59.72,565-13,565-13V0Z"></path>
        </svg>
    </div>
    <div class="container">
        <div class="f-items default-padding">
            <div class="row">
                <div class="col-md-4 col-sm-6 equal-height item">
                    <div class="f-item about">
                        <img alt="Logo" src="assets/img/logo.png">
                        <p>
                            我们将创新与技术融入每一行代码，为您打造独一无二的数字化解决方案。专注品质，快速交付，助力您的业务。现在就联系我们，未来从这里开始！
                        </p>
                        <h5>联系我们</h5>
                        <form action="#">
                            <div class="input-group stylish-input-group">
                                <input class="form-control" name="email" placeholder="请输入您的电子邮箱" type="email">
                                <span class="input-group-addon">
                                        <button type="submit">
                                            <i class="fa fa-paper-plane"></i>
                                        </button>  
                                    </span>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-md-2 col-sm-6 equal-height item">
                    <div class="f-item link">
                        <h4>TOKEN（头肯）</h4>
                        <ul>
                            <li>
                                <a href="#">主页</a>
                            </li>
                            <li>
                                <a href="#">关于我们</a>
                            </li>
                            <li>
                                <a href="#">发展</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="col-md-4 col-sm-6 equal-height item">
                    <div class="f-item twitter-widget">
                        <h4>联系方式&地址</h4>
                        <p>
                            武汉市洪山区南湖大道中南财经政法大学望湖
                        </p>
                        <div class="address">
                            <ul>
                                <li>
                                    <div class="info">
                                        <h5>Email:</h5>
                                        <span>mruixin@outlook.com</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="info">
                                        <h5>Phone:</h5>
                                        <span>+86 155-2738-9216</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Start Footer Bottom -->
    <div class="footer-bottom bg-light">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <p>&copy; Copyright 2023. All Rights Reserved by <a href="#">TOKEN（头肯）</a></p>
                </div>
                <div class="col-md-6 text-right link">
                    <ul>
                        <li>
                            <a href="#">团队</a>
                        </li>
                        <li>
                            <a href="#">隐私政策</a>
                        </li>
                        <li>
                            <a href="#">额外支持</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End Footer Bottom -->
</footer>
<!-- End Footer -->

<!-- jQuery Frameworks
============================================= -->
<script src='assets/js/jquery.min.js'></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/equal-height.min.js"></script>
<script src="assets/js/jquery.appear.js"></script>
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/modernizr.custom.13711.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/progress-bar.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/count-to.js"></script>
<script src="assets/js/YTPlayer.min.js"></script>
<script src="assets/js/circle-progress.js"></script>
<script src="assets/js/bootsnav.js"></script>
<script src="assets/js/main.js"></script>
<script>// 显示遮罩层并加载长图
function showOverlay(imageSrc) {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 使用平滑滚动
    });
    // 显示遮罩层
    const overlay = document.getElementById('overlay');
    const overlayImage = document.getElementById('overlay-image');

    // 设置长图路径
    overlayImage.src = imageSrc;

    // 显示遮罩层
    overlay.style.display = 'flex';

}

// 关闭遮罩层
function closeOverlay() {
    const overlay = document.getElementById('overlay');
    overlay.style.display = 'none';
}
</script>
</body>
</html>